<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>插入和元素替换操作</title>
		<!-- 插入和元素替换操作：针对元素增删改操作 
		     oppend()从内部末尾追加    功能：在匹配元素集合中所有元素内部末尾插入内容
			 prepend（）头部追加       功能：在匹配元素集合中所有元素内部开头插入内容
			  after（）               功能：在匹配元素集合中所有元素后面插入内容
			  before（）              功能：在匹配元素集合中所有元素前面插入内容
			  
			  remove（）----真删      功能：移除匹配元素中所有元素和子元素【盒子模型都删除】
			  empty（）---假          功能：清除匹配元素集合中所有元素的内容【盒子模型不删除】
			  
			  replaceWith（）-->
		
		<style>
			button{
				margin: 5px;
				padding: 10px 15px;
				cursor: pointer;
			}
			body{
				margin: 20px;
			}
			#target{
				border: 1px solid #00ff00;
				margin-left: 5px;
				padding: 10px;
				margin-top: 10px;
				border-radius: 5px;
			}
		</style>
		<script src="jquery-1.11.1(1).js"></script>
	</head>
	<body>
		
		<!-- html:7个按钮 div>p 目标元素的初始段落 id="target"
		                  div>p 插入新元素的初始段落 id="newElement" 隐藏
			css:按钮：外边距：5px 内边距：10px 15px 鼠标移动上时：显示手指
			    body：外边距20px
				target:1PX边框 内边距：10px、上外边距：10px
		-->
		<button id="appendBtn">内部末尾插入元素</button>
		<button id="prependBtn">内部开头插入元素</button>
		<button id="afterBtn">外部后面插入元素</button>
		<button id="beforeBtn">外部前面插入元素</button>
		<button id="removeBtn">删除元素</button>
		<button id="emptyBtn">清空元素</button>
		<button id="replaceBtn">替换元素</button>
		<!-- 目标显示区域 替换-->
		<div id="target">
		    <p>目标元素的初始段落</p>
	    </div>
	    <div id="newElement" style="display: none;">
			<!-- 用于插入新元素的初始段落 -->
	    	<p>插入新元素的初始段落</p>
	    </div>
		<div id="rewElement" style="display: none;">
					<p>插入元素的初始段落</p >
				</div>
		<script>
			/* 1.点击：内部末尾插入元素：按钮-p文本后面追加新元素中包含内容操作 */
			$("#appendBtn").click(function(){
				//效果： 点击按钮 追加“新元素---自带内容”
				//1.1 追加内容为新元素---克隆---html结构全部复制出来，元素包括属性
				var cpe =$("#newElement").clone();
				//clone() 创建一个元素的副本 副本包含：内部元素以及所有属性和属性值
				//1.2 自带属性和属性值：隐藏---改为显示
				cpe.css("display","block");
				//1.3 将复制出来的元素，追加给当前元素上
				$("#target").append(cpe);
			});
			/* 2.点击：内部开头插入元素：按钮-p文本前面追加新元素中包含内容操作 */
			$("#prependBtn").click(function(){
				//效果： 点击按钮 追加“新元素---自带内容”
				//1.1 追加内容为新元素---克隆---html结构全部复制出来，元素包括属性
				var cpe =$("#newElement").clone();
				//clone() 创建一个元素的副本 副本包含：内部元素以及所有属性和属性值
				//1.2 自带属性和属性值：隐藏---改为显示
				cpe.css("display","block");
				//1.3 将复制出来的元素，追加给当前元素上
				$("#target").prepend(cpe);
			});
			/* 3.点击：外部末尾插入元素：按钮-p文本后面追加新元素中包含内容操作 */
			$("#afterBtn").click(function(){
				//效果： 点击按钮 追加“新元素---自带内容”
				//1.1 追加内容为新元素---克隆---html结构全部复制出来，元素包括属性
				var cpe =$("#newElement").clone();
				//clone() 创建一个元素的副本 副本包含：内部元素以及所有属性和属性值
				//1.2 自带属性和属性值：隐藏---改为显示
				cpe.css("display","block");
				//1.3 将复制出来的元素，追加给当前元素上
				$("#target").after(cpe);
			});
			/* 4.点击：外部前面插入元素：按钮-p文本后面追加新元素中包含内容操作 */
			$("#beforeBtn").click(function(){
				var cpe= $("#newElement").clone();
				cpe.css({
					"width":"300px",
					"height":"300px",
					"background":"#ff0",
					"background-image":"url(../img/奶龙.gif)",
					"background-size":"100%",
					"color":"transparent"
				});
				$("#target").before(cpe);
				/* 5.点击：删除元素：按钮-p文本后面追加新元素中包含内容操作 */
			});
			$("#removeBtn").click(function(){
				$("#target").remove();
			});
			/* 6.清空 */
			$("#emptyBtn").click(function(){
				$("#target").empty();
			});
		// 7.点击 替换元素按钮 页面上目标元素替换为新元素
			$("#replaceBtn").click(function(){
			// 克隆		新元素 #newElement 【父子级】
			var c=$("#newElement").clone().css("display","block");
			// 替换	新元素	替换		目标元素
			$("#target").replaceWith(c);
		});
		</script>
	</body>
</html>
